<template>
    <div>{{ countdown }}</div>
    <div>{{ test }}</div>
    <!-- test修改,子组件内的test值没有变化,子组件没有更新,说明更新的细粒度是组件,只有组件自身响应式变量发生变化时自身组件才会得到更新! -->
    <son :countdown="countdown">{{ test }}</son>
</template>
    
<script setup>
import { ref, onUpdated } from 'vue';
import son from './son.vue'

const countdown = ref(10)
let timer = setInterval(() => {
    console.dir(countdown)
    countdown.value--
    if (countdown.value === 0) {
        clearInterval(timer)
    }
}, 1000)

let test = 'end of time'
setTimeout(() => {
    // 2s之后页面test发生变化,表示组件是整个更新的!
    test = 'start of time'
}, 2000);

onUpdated(() => {
    console.log('updated')
})
</script>
    
<style lang="scss" scoped>
</style>